<template>
  <div>
    <div class="control-operate-btn">
      <div class="operate-btn" @click="openDialog">
        <img :src="require('../../img/operate.png')" />
      </div>
      <div class="delete-btn" @click="handleDelete">
        <img :src="require('../../img/delete.png')" />
      </div>
    </div>
  </div>
</template>

<script>
import { MessageBox } from "element-ui";
export default {
  name: "UseControlOperate",
  props: {
    id: {
      type: [Number, String],
      default: 0,
    },
    controlType: {
      type: String,
      default: "Text",
    },
  },
  data() {
    return {};
  },
  methods: {
    openDialog() {
      this.$emit("update:showDialog", true);
    },
    handleDelete() {
      MessageBox.confirm("此操作将删除此控件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$root.$emit("deleteTargetControl", this.id);
          this.$message.success("操作成功");
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.control-operate-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;

  & > .operate-btn,
  & > .delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-left: 6px;
    cursor: pointer;

    // & > span {
    //   display: block;
    //   font-size: 12px;
    //   transform: scale(0.5);
    //   font-family: MicrosoftYaHei;
    //   color: #5597f7;
    //   line-height: 16px;
    //   margin-top: -4px;
    // }
  }

  //   & > .delete-btn {
  //     margin-left: -4px;
  //     & > span {
  //       color: #ff5c5d;
  //     }
  //   }
}
</style>
